<html>
<head>
    <title>SIMILE | Timeline</title>
    <link rel='stylesheet' href='styles.css' type='text/css' />
    <link rel="alternate" type="application/rdf+xml" href="doap.rdf" />
    <link href="colourmod/ColourModStyle.css" rel="stylesheet" type="text/css" />
   
    <script src="api/timeline-api.js" type="text/javascript"></script>
	
	<script language="JavaScript" type="text/javascript" src="ScriptLibrary/Atlas/Release/AtlasCompat.js"></script>
	<script language="JavaScript" type="text/javascript" src="ScriptLibrary/Atlas/Release/Atlas.js"></script>
			
		
		
	<script language="JavaScript" type="text/javascript" src="ScriptLibrary/AjaxLabCommandPrompt/Engine/Abstract/CMD.js"></script>
	<script language="JavaScript" type="text/javascript" src="ScriptLibrary/AjaxLabCommandPrompt/Engine/Core/CMD.js"></script>
    
	<script>
		
        var tl;
		var eventSource;
		
		function changeEventIcon()
		{
			var elSel = document.getElementById('eventIcon');
			var i;
			for (i = elSel.length - 1; i>=0; i--) {
				if (elSel.options[i].selected) {
					var icon = elSel.options[i].value;
					var iconImage =  document.getElementById('eventIconImage');
					iconImage.src = icon;
				}
			}
		}
		
		function AddEvents()
		{
	
			eventSource.LoadDataTable();
		}
		
		function addEvent()
		{
			var isValid = true;
			
			var taskname = document.getElementById("TaskName").value;
			var taskdesc = document.getElementById("TaskDes").value;
	
			var startdate =  String(dojo.widget.byId("StartDate").datePicker.storedDate).replace(/-/g,"/");
		
			
			var starttime = dojo.widget.byId("StartTime").regularstoredTime;
			
			var enddate =  String(dojo.widget.byId("EndDate").datePicker.storedDate).replace(/-/g,"/");
		
			var endtime = dojo.widget.byId("EndTime").regularstoredTime;
			
			var startany = dojo.widget.byId("StartTime").selectedTime.anyTime;
			var endany = dojo.widget.byId("EndTime").selectedTime.anyTime;
			if(startany==true)
			{
				starttime = "";
			}
			if(endany==true)
			{
				endtime = "";
			}
			
			var elDurationGroup = document.getElementById('isDurationGroup1');
			var isDuration;
			if(elDurationGroup.checked)
			{
				isDuration = "true";
			}
			else{
				isDuration = "false";
			}
			var eventicon;
			var elSel = document.getElementById('eventIcon');
			var i;
			for (i = elSel.length - 1; i>=0; i--) {
				if (elSel.options[i].selected) {
					eventicon = elSel.options[i].value;
					break;
				}
			}
			
			var eventimage = document.getElementById("eventImage").value;
			var eventurl = document.getElementById("eventURL").value;
			var eventcolor =  document.getElementById("eventColor").value;
			var eventtextcolor =  document.getElementById("eventTextColor").value;
			
			if(taskname=="" || taskdesc=="" || startdate=="" )
			{
				alert("one of the required field is missing");
				isValid = false;
			}
			//eventSource.LoadEvent(taskname,taskdesc,startdate,starttime);
			if(isValid==true)
			{
				eventSource.LoadEventComplete(startdate,starttime, enddate,endtime,null,null,isDuration,taskname,taskdesc,eventimage,eventurl,eventicon,eventcolor,eventtextcolor);
			}
			
		}
		
		function ToggleTimeLine()
		{
			var tl = document.getElementById("tl");
			if(tl.style.display!="")
			{
				tl.style.display="";
			}
			else{
				tl.style.display="none";
			}
		}
		
        function onLoad() {
            eventSource = new Timeline.DefaultEventSource();
            
			var bandInfos = [
				Timeline.createBandInfo({
					eventSource:    eventSource,
					width:          "30%", 
					timeZone:       -4,
					intervalUnit:   Timeline.DateTime.HOUR, 
					intervalPixels: 100
				}),
				Timeline.createBandInfo({
					eventSource:    eventSource,
					width:          "30%", 
					timeZone:       -4,
					intervalUnit:   Timeline.DateTime.DAY, 
					intervalPixels: 500
				}),
				Timeline.createBandInfo({
					showEventText:  false,
					trackHeight:    0.5,
					trackGap:       0.2,
					eventSource:    eventSource,
					width:          "30%", 
					timeZone:       -4,
					intervalUnit:   Timeline.DateTime.WEEK, 
					intervalPixels: 100
				}),
				Timeline.createBandInfo({
					showEventText:  false,
					trackHeight:    0.5,
					trackGap:       0.2,
					timeZone:       -4,
					eventSource:    eventSource,
					width:          "10%", 
					intervalUnit:   Timeline.DateTime.MONTH, 
					intervalPixels: 200
				})
			  ];
			  
	
			  bandInfos[1].syncWith = 0;
			  bandInfos[1].highlight = true;
			 
			  bandInfos[2].syncWith = 1;
  			  bandInfos[2].highlight = true;
			  bandInfos[2].eventPainter.setLayout(bandInfos[1].eventPainter.getLayout());
			  bandInfos[3].syncWith = 2;
  			  bandInfos[3].highlight = true;
  			  bandInfos[3].eventPainter.setLayout(bandInfos[2].eventPainter.getLayout());
			  Timeline.getDefaultTheme().ether.backgroundColors[3] = "#DDD";
			  
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
		
			
        }
        
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
		
		function pageLoad()
		{
	
			var cmd = new AjaxLab.Engine.Core.Cmd(null,"CmdPrompt",null,"http://www.ajaxlab.com");
			cmd.setIsDebug(false);
			onLoad();	
		}

		window.onresize = onResize;
    </script>
</head>
<body>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td valign="top"><a href="index.html">Home </a>- <a href="LiveExamples.html">Live Examples</a> - SIMILIE Project TimeLine Command Prompt </td>
          </tr>
        </table>

<div id="body">
    <h1>Project Management Timeline</h1>
    <p>Credit: Timeline project maintained by <a href="http://people.csail.mit.edu/people/dfhuynh/">David Fran&ccedil;ois Huynh</a>,
                at the SIMILE project.<br>
                <br>
                In this demostratation, A SIMILIE timeline command plugin is developed and allows you to use command prompt and add &quot;events&quot; onto SIMILIE timeline. (time is based on U.S eastern time) <br>
                <br>
                How is command plugin developed? Please take a look at the <a href="WritePlugIns.html">documentation here.</a><br>
                <br>
(<strong><em>*Note, &quot;clear&quot;, &quot;cd&quot; are the base plugin commands available to you at all times</em></strong>) 
<p> The SIMILIE Timeline Command takes in the following form: <br>
<pre><strong>
task -add eventtype|task name|task description|date|time </strong><br><br>&quot;task -add&quot; is the command name followed by five required parameters(eventtype,task name,task description,date, time) seperated via pipe &quot;|&quot; character<br><br>1. <strong>eventtype</strong> supports the following pharses:<br>
meeting<br>
email<br>
task<br>
helpdesk<br>
contacts<br>
network<br>
design<br>
2.  task name can be any string you want<br>3.  task descritpion can be any string you want<br>4.  <strong>date</strong> is in (mm/dd/yyyy) format<br>5.  <strong>time</strong> is in (hh:mm:ss) 24 hour military format<br>
for example, if I want to add an event "email", task name "shoot jackson an email", task description "ask jackson of the project status", on date: "7/17/2006", at time : "10:00:00"? I type<br>
task -add email|shoot jackson an email|ask jackson of the project status|7/17/2006|10:00:00

</pre>
      <br>
  (<a href="#" onClick="ToggleTimeLine()">Show/Hide TimeLine)</a>
    <div id="webaddtask" style="display:none">
    <form name="form1" method="post" action="">
      <table width="80%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>&nbsp;</td>
          <td colspan="3"><div align="right">* Required </div></td>
        </tr>
        <tr>
          <td bgcolor="#eeeeee">*Task Name: </td>
          <td colspan="3" bgcolor="#eeeeee"><input name="text" type="text" id="TaskName" value="MyTask"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td colspan="3">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#eeeeee">Event Type: </td>
          <td colspan="3" bgcolor="#eeeeee"><select name="eventIcon" id="eventIcon" onChange="changeEventIcon()">
            <option value="images/Icons/ShowGridlinesHS.png" selected>Meeting</option>
            <option value="images/Icons/CheckBoxHS.png">Task</option>
            <option value="images/Icons/eps_closedHS.png">Email</option>
            <option value="images/Icons/DialHS.png">HelpDesk</option>
            <option value="images/Icons/Book_openHS.png">Contacts</option>
            <option value="images/Icons/server.ico">Network</option>
            <option value="images/Icons/ColorHS.png">Design</option>
            <option value="images/Icons/openHS.png">Documentation</option>
            <option value="images/Icons/CheckGrammarHS.png">Others</option>
          </select>
          <img src="images/Icons/ShowGridlinesHS.png" alt="eventicon" name="eventIconImage" width="16" border="0" id="eventIconImage" /> (coresponds to event.icon) </td>
        </tr>
        <tr>
          <td colspan="4" valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td valign="top" bgcolor="#eeeeee">*Task Description:</td>
          <td colspan="3" bgcolor="#eeeeee"><textarea name="textarea" cols="50" rows="10" id="TaskDes" >MyTask Description</textarea></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#eeeeee">*Start Date: </td>
          <td bgcolor="#eeeeee"><div dateFormat="%h %d %Y" dojoType="dropdowndatepicker" widgetId="StartDate"></div></td>
          <td bgcolor="#eeeeee">End Date: </td>
          <td bgcolor="#eeeeee"><div dateFormat="%h %d %Y" dojoType="dropdowndatepicker" widgetId="EndDate">          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#eeeeee">Start Time: </td>
          <td bgcolor="#eeeeee"><input dojoType="timepicker" type="text" id="StartTime" name="StartTime" /></td>
          <td bgcolor="#eeeeee">End Time: </td>
          <td bgcolor="#eeeeee"><input dojoType="timepicker" type="text" id="EndTime" name="EndTime" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td colspan="3">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td colspan="3">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#eeeeee">Is Duration: </td>
          <td colspan="3" bgcolor="#eeeeee">
            <input name="isDurationGroup" type="radio" id="isDurationGroup1" value="true" checked >
            True
            <input name="isDurationGroup" type="radio" id="isDurationGroup2" value="false"  >
          False </td>
        </tr>
        <tr>
          <td>Event Popup Image: </td>
          <td colspan="3"><label>
            <input name="eventImage" type="text" id="eventImage" value="http://www.favorite-puppy-names.com/images/cocker_spaniel_puppy_picture.jpg" />
          </label></td>
        </tr>
        <tr>
          <td bgcolor="#eeeeee">Event Popup Title Url: </td>
          <td colspan="3" bgcolor="#eeeeee"><input name="eventURL" type="text" id="eventURL" value="http://www.limingxu.com" /></td>
        </tr>
        <tr>
          <td>Event Color: </td>
          <td colspan="3">
		  	  <input type="text" name="eventColor" id="eventColor" />
		  <a href="javascript:;" onMouseDown="pickcolor('style1', 'color', false, 'eventColor', this)" title="Pick a color">Pick</a>          </tr>
        <tr>
          <td bgcolor="#eeeeee">Event Text Color: </td>
          <td colspan="3" bgcolor="#eeeeee">
		  		<input type="text" name="eventTextColor" id="eventTextColor" />
  		  <a href="javascript:;" onMouseDown="pickcolor('style1', 'color', false, 'eventTextColor', this)" title="Pick a text color">Pick</a>		  </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td colspan="3">&nbsp;</td>
        </tr>
        <tr>
          <td><input type="button" name="Submit" value="Add Task" onClick="addEvent()"></td>
          <td colspan="3">&nbsp;</td>
        </tr>
      </table>
      <br>
      <label></label>
</form>
</div>
    <div id="tl" class="timeline-default" style="height: 250px; margin: 2em;"></div>
    
	<div id="showhideCMD">
				<table id="test_content" width="100%">
					<tr>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td><textarea name="textarea"  rows="10" wrap="virtual" id="CmdPrompt" style="BACKGROUND:#000000; COLOR:#ffffff; width:100%"></textarea></td>
					</tr>
				</table>
	</div>
			
    <h2>Credits</h2>
    <p>Ajaxlab.com
    </p>
</body>
</html>